<template>
  <fieldset>
    <legend>商品</legend>
    <h2>商品列表</h2>
    <ul>
      <li v-for="item in products" :key="item.id">
        <b>产品名称{{ item.title }}</b>
        ----------------
        <b>价格:{{ item.price }}</b>
        ----------------
        <b>库存:{{ item.inventory }}</b>
        <button :disabled="item.inventory === 0" @click="add(item)">
          +加入购物车
        </button>
      </li>
    </ul>
  </fieldset>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  methods: {
    add(item) {
      item.inventory = item.inventory - 1;
      this.ADD_CART(item);
    },
    ...mapActions("Products", ["FETCH_PRODUCT"]),
    ...mapActions("carts", ["ADD_CART"]),
  },
  mounted() {
    this.FETCH_PRODUCT();
  },
  computed: {
    ...mapState("Products", ["products"]),
  },
  // created(){
  //     axios.get('/api/data/index.json',{
  //         headers:{},
  //         params:{
  //             name:'lilei'
  //         }
  //     })
  //     .then(res =>{
  //         console.log(res)
  //     }),

  //     // axios.post('/api/users/index.json',{
  //     //     username:'lbw',
  //     //     password:'555'
  //     // },{
  //     //     //配置
  //     //     headers:{
  //     //         nickname:'wyf'
  //     //     }
  //     // })
  //     // .then(res =>{
  //     //     console.log(res)
  //     // })

  //     axios({
  //         url:"/api/users/login",
  //         method:'post',
  //         data:{
  //             username:'admin',
  //             password:'admin'
  //         },
  //         headers:{},
  //         timeout:3000,
  //         withCredentials:true
  //     })
  // }
};
</script>
